<template>
  <div>
    <header>
      <n-bar></n-bar>
      <div class="bot_box">
        <div class="box1">
          <div v-if="$route.query.id">
            <h2>{{ addresslist.username }} {{ addresslist.userphone }}</h2>
            <p>
              <van-tag round type="warning">{{
                addresslist.status ? "默认" : ""
              }}</van-tag
              >&nbsp;
              <van-tag round type="primary">{{ addresslist.label }}</van-tag
              >&nbsp;
              {{ addresslist.useraddress }}
            </p>
          </div>
          <div v-else class="btn">
            <van-button type="warning" @click="address"
              >+点击完善收货地址</van-button
            >
          </div>
        </div>
      </div>
    </header>
    <div class="pinpai">
      <div class="pinpai_top">
        <div class="left">
          <img src="../assets/images/pingpai01.png" alt="" />
          <p>品牌精选</p>
        </div>
        <div class="right">
          <p>
            <span>已免运费</span>
            <span>
              <a href="#">领券</a>
            </span>
          </p>
        </div>
      </div>
      <div class="pinpai_bot">
        <ul>
          <van-card
            v-for="item in list"
            :key="item.id"
            num="1"
            :price="item.price | toPrice"
            :title="item.goodsname"
            :thumb="item.img"
          >
          </van-card>
        </ul>
      </div>
      <div class="serve">
        <div class="leixing">
          <p>发票类型</p>
          <a href="#">
            不开发票
            <span class="iconfont icon-arrow-right"></span>
          </a>
        </div>
        <div class="shouhou">
          <p>售后免邮</p>
          <p>部分商家赠送</p>
        </div>
        <div class="liuyan">
          <p>买家留言</p>
          <p>填写内容需要与商家协商并确认，45字以内</p>
        </div>
      </div>
    </div>
    <div class="price">
      <div class="jine">
        <p>商品金额</p>
        <p>￥1998</p>
      </div>
      <div class="huodong">
        <p>优惠活动</p>
        <p>-￥200</p>
      </div>
      <div class="youhui">
        <p>优惠券</p>
        <p>暂无可用</p>
      </div>
    </div>
    <footer>
      <div class="foot_box">
        <div class="left">
          <p>
            <span>合计</span>
            <span>已免运费</span>
          </p>
          <p>
            <span>￥{{ (List.countmoney / 100) | toPrice }}</span>
            <span>已优惠￥200元</span>
          </p>
        </div>
        <div class="right">
          <p @click="pay">确认订单</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { addresslist, orderadd } from "../requset/app";
import querystring from 'querystring'
export default {
  data() {
    return {
      // orderlist: [],
      addresslist: {},
      list: [],
      List: [],
    };
  },
  methods: {
    pay() {
      let orderInfo = JSON.parse(sessionStorage.getItem("orderInfo"));
      orderadd({
        uid: this.$store.getters.getUserInfo.uid,
        countmoney: orderInfo.countmoney,
        addressid: this.$route.query.id,
        idstr: orderInfo.idstr,
        countnumber:orderInfo.countnumber,
      }).then((res) => {
        console.log(res);
             this.$router.push("/pay?"+querystring.stringify(res.list));
      });
 
    },
    address() {
      this.$router.push("/address");
    },
  },
  created() {
    if (this.$route.query.id) {
      addresslist({
        uid: this.$store.getters.getUserInfo.uid,
        id: this.$route.query.id,
      }).then((res) => {
        console.log(res, "地址列表");
        if (res.code == 200) {
          this.addresslist = res.list[0];
        }
      });
    }
    this.list = JSON.parse(sessionStorage.getItem("arr"));
    this.List = JSON.parse(sessionStorage.getItem("orderInfo"));
  },
};
</script>

<style scoped>
.btn {
  margin-top: 0.3rem;
  margin-left: 1rem;
}
/* 头部 */
header {
  background-color: #ff6040;
  box-sizing: border-box;
  margin-bottom: 0.34rem;
}

/* 顶部信息 */
header .top_box {
  height: 0.44rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.06rem 0 0.17rem;
  box-sizing: border-box;
}

header .top_box > a span {
  font-size: 0.17rem;
  color: #ffffff;
}

header .top_box h2 {
  opacity: 0.8;
  font-size: 0.17rem;
  color: #ffffff;
  margin-left: 0.23rem;
}

header .top_box .more {
  width: 0.87rem;
  height: 0.32rem;
  background: rgba(255, 119, 51, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.405rem;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

header .top_box .more .line {
  width: 1px;
  height: 0.19rem;
  background: rgba(255, 255, 255, 0.25);
}

header .top_box .more a span {
  font-size: 0.19rem;
  opacity: 0.8;
  color: #ffffff;
}

header .bot_box {
  height: 0.9rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 0.02rem 0.06rem 0 rgba(255, 149, 128, 0.5);
  display: flex;
  justify-content: center;
  margin-top: 0.16rem;
}

header .bot_box .box {
  width: 3.55rem;
  height: 1.04rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-left: 0.2rem;
  box-sizing: border-box;
}

header .bot_box .box .name {
  font-size: 0.18rem;
  color: #333333;
}

header .bot_box .box .address {
  width: 3.15rem;
  height: 0.36rem;
  font-size: 0.14rem;
  color: #666666;
  line-height: 0.18rem;
}
header .bot_box .box1 h2 {
  padding: 0.15rem;
}
header .bot_box .box1 p {
  padding-left: 0.15rem;
  font-size: 0.15rem;
  color: rgb(100, 98, 98);
}

header .bot_box .box1 {
  width: 3.55rem;
  height: 1.04rem;
  background-color: rgb(231, 230, 230);
}
header .bot_box .box1 .add {
  text-align: center;
  font-size: 0.2rem;
  color: #f3b565;
  border: 1px solid #deb88e;
  padding: 0.1rem 0.3rem;
}

.pinpai {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.pinpai_top {
  width: 3.75rem;
  height: 0.56rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pinpai_top .left {
  display: flex;
  align-items: center;
  padding-left: 0.14rem;
  box-sizing: border-box;
}

.pinpai_top .left img {
  width: 0.16rem;
  height: 0.16rem;
}

.pinpai_top .left p {
  font-size: 0.16rem;
  color: #333333;
  margin-left: 0.09rem;
}

.pinpai_top .right {
  font-size: 0.12rem;
  padding-right: 0.1rem;
  box-sizing: border-box;
}

.pinpai_top .right p span:nth-child(1) {
  color: #333333;
  padding-right: 0.09rem;
  box-sizing: border-box;
}

.pinpai_top .right p span:nth-child(2) a {
  color: #ff6040;
  border-left: 1px solid #979797;
  padding-left: 0.09rem;
  box-sizing: border-box;
}

.pinpai_bot {
  padding-left: 0.1rem;
  box-sizing: border-box;
}

.pinpai_bot ul li {
  display: flex;
}

.pinpai_bot ul li:nth-child(1) {
  margin-bottom: 0.2rem;
}

.pinpai_bot ul li .left img {
  width: 1.08rem;
  height: 1.09rem;
}

.pinpai_bot ul li .right {
  margin-left: 0.15rem;
}

.pinpai_bot ul li .right p:nth-child(1) {
  width: 2.32rem;
  height: 0.48rem;
  font-size: 0.16rem;
  color: #333333;
  line-height: 0.24rem;
}

.pinpai_bot ul li .right .box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pinpai_bot ul li .right .box .left {
  margin-top: 0.05rem;
}

.pinpai_bot ul li .right .box .left span:nth-child(1) {
  font-size: 0.1rem;
  color: #ff6040;
}

.pinpai_bot ul li .right .box .left span:nth-child(2) {
  font-size: 0.2rem;
  color: #ff6040;
}

.pinpai_bot ul li .right .box .right span:nth-child(1) {
  font-size: 0.16rem;
  color: #333333;
}

.pinpai_bot ul li .right .box .right span:nth-child(2) {
  font-size: 0.16rem;
  color: #333333;
}

.pinpai_bot ul li .right p:nth-child(3) {
  display: flex;
  margin-top: 0.1rem;
}

.pinpai_bot ul li .right p:nth-child(3) span {
  height: 0.16rem;
  font-size: 0.1rem;
  color: #ffffff;
  background: #ff8066;
  text-align: center;
}

.pinpai_bot ul li .right p:nth-child(3) span:nth-child(1) {
  width: 1.1rem;
}

.pinpai_bot ul li .right p:nth-child(3) span:nth-child(2) {
  width: 0.3rem;
  margin-left: 0.05rem;
}

.pinpai .serve {
  padding: 0 0.1rem;
  box-sizing: border-box;
  margin-top: 0.3rem;
}

.pinpai .serve div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.pinpai .serve .leixing p:nth-child(1),
.pinpai .serve .shouhou p:nth-child(1),
.pinpai .serve .liuyan p:nth-child(1) {
  font-size: 0.12rem;
  color: #333333;
  font-weight: bold;
}

.pinpai .serve .leixing a {
  font-size: 0.12rem;
  color: #333333;
}

.pinpai .serve .leixing a span {
  font-size: 0.08rem;
  color: #666666;
}

.pinpai .serve .shouhou p:nth-child(2) {
  font-size: 0.12rem;
  color: #666666;
}

.pinpai .serve .liuyan p:nth-child(2) {
  font-size: 0.12rem;
  color: #666666;
}

.price {
  margin-top: 0.1rem;
  background-color: #fff;
  margin-bottom: 0.72rem;
}

.price div {
  display: flex;
  justify-content: space-between;
  padding: 0 0.1rem;
  box-sizing: border-box;
  font-size: 0.12rem;
  color: #333333;
  padding-top: 0.2rem;
  box-sizing: border-box;
}

.price .jine p:nth-child(1),
.price .huodong p:nth-child(1),
.price .youhui p:nth-child(1) {
  font-weight: bold;
}

.price .jine p:nth-child(2) {
  color: #666666;
}

.price .huodong p:nth-child(2) {
  color: #ff6040;
}

footer {
  background-color: #fff;
  box-shadow: 0 -0.05rem 0.1rem 0 rgba(204, 204, 204, 0.2), 0 0 0 0 #cccccc;
  position: fixed;
  bottom: 0;
}

footer .foot_box {
  width: 3.75rem;
  height: 0.49rem;
  display: flex;
  justify-content: space-between;
  padding-left: 0.11rem;
  box-sizing: border-box;
}

footer .foot_box .left {
  display: flex;
}

footer .foot_box .left p {
  display: flex;
  flex-direction: column;
}

footer .foot_box .left p:nth-child(1) span:nth-child(1) {
  font-size: 0.16rem;
  color: #333333;
  padding-top: 0.03rem;
  box-sizing: border-box;
}

footer .foot_box .left p:nth-child(1) span:nth-child(2) {
  font-size: 0.1rem;
  color: #999999;
  padding-top: 0.03rem;
  box-sizing: border-box;
}

footer .foot_box .left p:nth-child(2) {
  margin-left: 0.16rem;
}

footer .foot_box .left p:nth-child(2) span:nth-child(1) {
  font-size: 0.2rem;
  color: #ff6040;
}

footer .foot_box .left p:nth-child(2) span:nth-child(2) {
  font-size: 0.1rem;
  color: #999999;
}

footer .foot_box .right {
  width: 1.1rem;
  height: 0.49rem;
  background: #ff6040;
  /* background-color: plum; */
  font-size: 0.16rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.49rem;
}
</style>
